<template>
    <div class="rate">
        <div 
            v-for="i in 5" 
            :key="i"
            @click="() => onClick(i)"
        >
            <i :class="'el-icon-star-' + (i <= value ? 'on' : 'off')" />
        </div> 
    </div>
</template>

<script>
export default {
    props: {
        value: Number,
    },
    emits: ['update:value'],
    methods: {
        onClick (i) {
            this.$emit('update:value', i);
        },
    },
}
</script>

<style>
.rate {
    width: 150px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
</style>